<template>
  <GlobalContainer className="flex flex-col" :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="物业+居家养老" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="flex flex-1 flex-col rounded-20 bg-white pt-24">
      <div class="search-c mb-32 flex items-center px-32">
        <div class="input-c flex items-center">
          <image src="../../static/images/my/search_icon.png" class="mr-10 size-40" />
          <input v-model="searchValue" type="text" placeholder="请输入" @blur="searchHandle" />
        </div>
        <div class="log-btn" @tap="toLog">历史工单</div>
      </div>
      <div class="list-c flex flex-1 items-start">
        <div class="category-list-c">
          <div
            class="category-item-c"
            :class="{ active: item.id === categoryId }"
            v-for="item in categoryList"
            :key="item.id"
            @tap="getProductList(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="goods-list-c">
          <div class="goods-item-c w-[30%] flex-col" v-for="item in productList" :key="item.id" @tap="toDetail(item)">
            <div class="line2 flex items-center justify-center">
              <image :src="item.coverImage || `${OSS_URL}/images/default.png`" class="size-100" />

              <!-- <div class="left">
                  {{ item.salePrice }}<span v-if="item.unit">/{{ item.unit }}</span>
                </div> -->
              <!-- <div class="goods-button ml-auto" @tap="toDetail(item)">去预约</div> -->
            </div>
            <div class="line1">{{ item.title }}</div>
          </div>
          <div v-if="productList.length === 0" class="empty-container mx-auto mt-240 flex flex-col items-center">
            <div class="empty-img mb-40">
              <image class="h-240 w-330" src="../../static/images/jiaofei_empty.png" />
            </div>
            <div class="empty-text text-28 leading-36 text-[#909399]">暂无记录</div>
          </div>
        </div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getProductCategoryPage, getProductPage } from '@/common/api/report'
const OSS_URL = import.meta.env.VITE_OSS_URL
const toDetail = item => {
  uni.navigateTo({
    url: '/subPages/wuye/goodsDetail?id=' + item.id
  })
}
const toLog = () => {
  uni.navigateTo({
    url: '/subPages/wuye/log'
  })
}
const searchHandle = () => {
  categoryId.value = ''
  getProductList(categoryId.value)
}
const searchValue = ref('')
const categoryList = ref([])
const categoryId = ref('')
const productList = ref([])

const getCategoryList = () => {
  getProductCategoryPage({ pageNo: 1, pageSize: 9999 }).then(res => {
    if (res.records.length > 0) {
      categoryId.value = res.records[0].id
      getProductList(categoryId.value)
    }
    categoryList.value = res.records
  })
}
const getProductList = id => {
  categoryId.value = id
  searchValue.value = ''
  getProductPage({
    categoryId: id,
    pageNo: 1,
    pageSize: 9999,
    title: searchValue.value
  }).then(res => {
    productList.value = res.records
  })
}
onMounted(() => {
  getCategoryList()
})
</script>

<style scoped lang="scss">
.input-c {
  flex: 1;
  padding: 24rpx;
  margin-right: 20rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 1px solid #dcdfe6;
}
.log-btn {
  margin-left: auto;
  width: 160rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #fafafa;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1px solid #cdd0d6;
  font-size: 26rpx;
  color: #606266;
}
.list-c {
  border-top: 1px solid #efefef;
  display: flex;
}
.category-list-c {
  width: 188rpx;
  flex-shrink: 0;
  align-self: stretch;

  background: #f0f2f5;
  .category-item-c {
    width: 100%;
    text-align: center;
    line-height: 100rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #606266;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .active {
    background: #fff;
  }
}
.goods-list-c {
  flex: 1;
  padding: 0 24rpx;
  padding-bottom: 24rpx;
  display: flex;
  flex-wrap: wrap;

  .goods-item-c {
    padding: 26rpx 0;
    overflow: hidden;

    margin-right: 6rpx;
    &:nth-child(3n) {
      margin-right: 0rpx;
    }
    .line1 {
      font-size: 28rpx;
      margin-top: 10rpx;
      color: #303133;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .line2 {
      width: 100%;
      height: 100rpx;
    }
    .goods-button {
      width: 134rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #1e90ff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 26rpx;
      color: #ffffff;
    }
  }
}
</style>
